<template>
  <div class="edit-paragraph" :data-index="'dom_'+info.index" :class="{'box_border':!preview,'edit-paragraph_del':isDelClickHandler||info.isDelClickHandler}" @click.stop.prevent="delClickHandler($event,info.isExistImg)">
    <div class="paragraph-container" v-if="!(preview && this.info.status === 'del')" v-html="info.text">
    </div>
    <div class="img-mask" v-show="isShowExistImg||info.isShowExistImg">
    </div>
    <div class="edit-btn" v-show="isShowEditBtn&&info.text" @click.stop="editParagraph">编辑</div>
    <!-- <i v-if="this.info.status === 'edit' && !preview" class="icon iconfont icon-write_empty del-icon" @click.stop="delClickHandler"/>
     -->
     <!-- <img  v-if="this.info.status === 'edit' && !preview" class="del-icon" :src="closeIcon" @click.stop="delClickHandler"> -->
    <!-- <div v-if="this.info.status === 'del'&& !preview" class="repeal-del-container">
      <div class="del-btn" @click="repealClickHandler">撤销删除</div>
    </div> -->
  </div>
</template>
<script>
export default {
  props: {
    info: { type: Object },
    renderDom: { type: Array },
    paragraphCount: { type: Number,default:0 },
    preview: { type: Boolean, default: false },
    index:{type:Number,default:0},
    saveParagraphCount:{type:Number,default:0},
  },
  data: () => ({ 
    paragraphCountCur:0,
    isShowExistImg:false,//删除图品   
    isDelClickHandler:false,//是否点击删除
    closeIcon: require('IMG/discover/closeIcon.png'),
    isShowEditBtn:false,//空标签和视频不展示编辑按钮
    isExistVedio:false,//是否存在视频
  }),
  created() {     
    let isExistImg = this.info.text.indexOf("img");
    let isExistVedio = this.info.text.indexOf("<video");
    //1 存在照片 0，不存在
    if(isExistImg>0){
      this.info.isExistImg = true;
    }else{
      this.info.isExistImg = false;
    }  
    if(isExistVedio>0){
      this.info.isExistImg = true;
      this.isExistVedio = true;
    }
  },
  mounted() {
    this.$nextTick(()=>{
      let curDom = document.querySelector(`div[data-index='dom_${this.info.index}']`);
      if(curDom.getBoundingClientRect().height>60){
        if(this.info.isDelClickHandler || this.info.isShowExistImg){
          this.isShowEditBtn = true;
        }
      }
    })
  },
  methods: {
    editParagraph(){
      this.$emit("edit",this.info);
    },
    // 点击删除
    delClickHandler(e,isExistImg) {
      e.stopPropagation();
      this.info.index = this.index;
      if(this.paragraphCount<2){
        if(this.info.status === 'del' && !this.preview){
          this.isDelClickHandler = false;
          if(isExistImg){
            this.isShowExistImg = false;
          }
          this.info.isShowExistImg = this.isShowExistImg
          this.info.isDelClickHandler = this.isDelClickHandler
          this.$emit('repealParagraph', { dom: this.info })
        }else{
          this.$toast('请至少保留一个段落!')
        }
        
        if(this.info.isDelClickHandler || this.info.isShowExistImg){
        //空内容段落不显示编辑按钮
          if(e.target.offsetParent.getBoundingClientRect().height>60){
            this.isShowEditBtn = true;
          }  
        }else{
          this.isShowEditBtn = false;
        }
        if(this.isExistVedio){
          this.isShowEditBtn = false;
        }

        return ;
      }
      if(this.info.status === 'edit' && !this.preview){
        
        let count = 0
        for (let temp of this.renderDom) {
          if (temp.status !== 'del') {
            count++;
          }
        }
        if(count==1){
          this.$toast('请至少保留一个段落!');
          return ;
        }
        
        if(isExistImg){
          this.isShowExistImg = true;
        }
        this.isDelClickHandler = true;
        this.info.isDelClickHandler = this.isDelClickHandler
        this.info.isShowExistImg = this.isShowExistImg
        this.$emit('delParagraph', { dom: this.info })       
      }
      else if(this.info.status === 'del' && !this.preview){
        this.isDelClickHandler = false;
        if(isExistImg){
          this.isShowExistImg = false;
        }
        this.info.isShowExistImg = this.isShowExistImg
        this.info.isDelClickHandler = this.isDelClickHandler
        this.$emit('repealParagraph', { dom: this.info })
      }

      if(this.info.isDelClickHandler || this.info.isShowExistImg){
        //空内容段落不显示编辑按钮
        if(e.target.offsetParent.getBoundingClientRect().height>60){
          this.isShowEditBtn = true;
        }  
      }else{
         this.isShowEditBtn = false;
      }
      // if(this.isExistVedio){
        //  this.isShowEditBtn = false;.0
      // }

    },
    // 撤销删除
    repealClickHandler(e) {
    }
  },
  watch: {
    paragraphCount(val){
      this.paragraphCountCur = val
    }
  },
  destroyed(){
    sessionStorage.removeItem("recodDelArr");
  },
}
</script>
<style>
.paragraph-container *{
  max-width: 100% !important;
}
</style>
<style lang="less" scoped>
.edit-paragraph_del{
  background:	rgba(68,81,102,0.25);
  text-decoration: line-through;
}
.edit-paragraph {
  position: relative;
  // border: 1px dashed #969ea8;
  // margin: 0 -5px 5px;
  // padding: 5px;
  text-indent: unset;
  .paragraph-container {
    padding: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
     img {
      // max-width: 100% !important;
      object-fit: cover;
    }
  }

  .img-mask{
    position: absolute;
    width: 100% !important;
    height: 100%;
    top:0;
    left:0;
    background: rgba(68,81,102,0.7);
  }
  .edit-btn{
    position: absolute;
    display: inline-block;
    right: 8px;
    bottom: 8px;
    width: 60px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #007AE6;
    border-radius: 4px;
    color: #fff;
    z-index: 10;
  }
  > .del-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    object-fit: cover;
    top: 0;
    right: -15px;
    transform: translate(-50%, -50%);
  }
  > .repeal-del-container {
    position: absolute;
    min-width: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(234, 77, 46, 0.4);
    border: 1px solid rgba(150, 158, 168, 1);
    > .del-btn {
      position: absolute;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      min-width: 96px !important;
      width: 96px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: rgba(234, 77, 46, 1);
      border-radius: 6px;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
    }
  }
}
</style>
